<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red{
            background-color: rgb(231, 173, 173);
        }
        .border{
            border: 1px solid greenyellow;
        }
        .fc{
            color: hotpink;
        }
        
    </style>
</head>
<body>
    <script src="./js/style.js"></script>
    <ul class="list">
        <li class="item fc">1</li>
        <li class="item border">2</li>
        <li class="item border fc">3</li>
        <li class="item">4</li>
        <li class="item">5</li>
        <li class="item">6</li>
    </ul>
    
    <script>
        const l1 = document.querySelectorAll('.item') // nodeList
        const l2 = document.getElementsByClassName('item') //htmlCollection
        // 类似与数组的对象都可以尝试用一下两种方式进行转换
        const arr1 = [...l1]
        const arr11 = Array.from(l1)
        const arr2 = [...l2]
        const arr21 = Array.from(l2)
        //nodeList可以使用forEach进行遍历，但是不能使用map
        // l1.forEach(function(item){
        //     console.log(item)
        // })
        
         //htmlCollection不可以使用forEach进行遍历
        // l2.forEach(function(item){
        //     console.log(item)
        // })
        const list = document.querySelector('.list')
        let item1 = list.children[0]
        let item2 = list.children[1]
        let item3 = list.children[2]
        //添加一个red
        //1
        item1.className = item1.className + ' red'
        //2
        item2.setAttribute('class',item2.getAttribute('class') + ' red')
        //3
        item3.classList.add("red")
        //删除red
        //1
        let c1 = item1.className
        let newC1 = c1.replace('red','')
        item1.className = newC1
        //2
        item2.classList.remove('red')
    </script>
</body>
</html>